<template>
	<view class="content">
		<view class="title">正和兴港疫情打卡系统</view>
		<view class="sub-title">用于疫情防控期间公司人员行程动态打卡</view>
		<view class="form-group">
			<view class="form-line">
				<view class="form-line-title info">查询条件</view>
			</view>
			<view class="form-line">
				<view class="form-line-title">部门 / 相关方</view>
				<view class="form-line-content">
					<uni-data-picker @change="selectDept" placeholder="请选择部门" popup-title="请选择部门" :localdata="deptArr"
						v-model="selectDeptName">
					</uni-data-picker>
				</view>
			</view>
			<view class="form-line">
				<view class="form-line-title">日期</view>
				<view class="form-line-content">
					<uni-datetime-picker type="date" :clearIcon="false" v-model="selectDate" />
				</view>
			</view>
			<view class="form-line">
				<button class="query-btn" type="default" @tap="getRecordList">查询</button>
			</view>
			<view class="form-line">
				<view class="form-line-title info">打卡报表</view>
			</view>
			<view class="sheet">
				<view class="row th">
					<view class="item-dpt">部门/外单位</view>
					<view class="item-name">姓名</view>
					<view class="item-status">打卡状态</view>
				</view>
				<view class="empty" v-if="sheetData.length == 0">空</view>
				<view v-else>
					<view class="row td" v-for="(item, index) in sheetData" :key="index">
						<view class="item-dpt">{{ item.dept}}</view>
						<view class="item-name">{{ item.name}}</view>
						<view class="item-status">{{ item.status}}</view>
					</view>
				</view>

			</view>
			<view class="footer">
				Copyright © 2022 苏州众联智港信息科技有限公司
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'

	import uniDataPicker from '@/components/uni-data-picker/components/uni-data-picker/uni-data-picker.vue'
	import uniDateTimePicker from '@/components/uni-datetime-picker/components/uni-datetime-picker/uni-datetime-picker.vue'
	export default {
		data() {
			return {
				deptArr: [],
				sheetData: [],
				selectDate: '',
				selectDeptName: '',
				openid: '',
				roles: '' // 空 无 ‘所有’查询全部
			}
		},
		computed: {
			...mapState(['listDptUrl', 'listRecord', 'listUserRoles'])
		},
		components: {
			uniDataPicker,
			uniDateTimePicker
		},
		methods: {
			getDeptList () {
				uni.request({
					url: this.listDptUrl
				}).then(res => {
					let dataArr = res[1].data.rows
					this.deptArr = dataArr.map(item => {
						return {
							'text': item.depname,
							'value': item.depname
						}
					})
				}).catch(err => {
					console.log(err)
				})
			},
			selectDept(e) {
				console.log(e)
			},
			getRecordList() {
				uni.request({
					url: this.listRecord,
					data: {
						depname: this.selectDeptName,
						createdatetime: this.selectDate
					}
				}).then(res => {
					let dataArr = res[1].data.rows
					this.sheetData = dataArr.map(item => {
						return {
							"dept": this.selectDeptName,
							"name": item.username,
							"status": item.ischeck,
						}
					})
				}).catch(err => {
					console.log(err)
				})
			},
			getUserRoles () {
				uni.request({
					url: this.listUserRoles,
					data: {
						wechatid: this.openid
					},
					success: (res) => {
						let user = res.data.rows[0]
						if (user) {
							if (user.role == '2') {
								this.getDeptList()
							} else if (user.role == '1') {
								this.deptArr = [{'text': user.depname, 'value': user.depname}]
							} else {}
						}
						
					}
				})
			}
		},
		onLoad() {
			this.openid = uni.getStorageSync('zhxg_openid')
			if (this.openid == '') {
				uni.showToast({
					title: '未打卡，请先打卡',
					icon: 'none'
				})
			} else {
				this.getUserRoles()
			}
		},
		onShow() {
			wx.hideHomeButton()
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		padding: 30upx 60upx;
	}

	.title {
		margin-top: 40upx;
		text-align: center;
		font-size: 42upx;
		font-weight: 800;
	}

	.sub-title {
		margin-top: 30upx;
		text-align: center;
		font-size: 24upx;
		color: #333333;
	}

	.form-group {
		margin-top: 30upx;
	}

	.form-line {
		padding: 30upx 0;
		border-bottom: 1px solid #E5E5E5;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 32upx;

		.form-line-title {
			width: 220upx;
			color: #000000;
		}

		.form-line-content {
			flex: 1;
		}

		.form-line-title.info {
			flex: 1;
			justify-content: flex-start;
			color: #888888;
			font-size: 24upx;
			margin-top: 30upx;
		}

		.paint-box {
			flex: 1;
			justify-content: flex-start;

			.box {
				height: 250upx;
				border: 1px solid #333333;
				margin-bottom: 15upx;
			}

			.clear-btn {
				margin-left: 0;
				width: 150upx;
				color: #18BC37;
				font-size: 28upx;
			}
		}
	}

	.input-value-border {
		border: 0;
	}

	.query-btn {
		flex: 0.3;
		font-size: 28upx;
		background-color: #18BC37;
		color: #ffffff;
	}

	.submit-btn {
		margin-top: 90upx;
		width: 60%;
		font-size: 28upx;
		background-color: #18BC37;
		color: #ffffff;
	}

	.footer {
		margin-top: 90upx;
		font-size: 20upx;
		text-align: center;
		color: #888888;
	}

	.sheet {
		.row {
			display: flex;
			justify-content: center;
			align-items: center;

			.item-dpt {
				flex: 1;
				text-align: center;
			}

			.item-name {
				flex: 1;
				text-align: center;
			}

			.item-status {
				flex: 1;
				text-align: center;
			}
		}

		.row.th {
			background-color: #f2f2f2;
			padding: 10upx 0;
			font-weight: 800;
		}

		.row.td {
			padding: 10upx 0;
			border-bottom: 1px dashed #E5E5E5;
		}

		.empty {
			text-align: center;
			margin: 60upx auto;
		}
	}
</style>
